<template>
  <div id="app">
      <el-row v-if="$route.meta.keep">
          <el-col :span="3">
              <el-menu v-if="MenuList"
                       v-for="menu in MenuList"
                       class="el-menu-vertical-demo"
                       router
                       unique-opened>
                  <el-menu-item v-if="!menu.childer" :index="menu.address">
                      <i :class="menu.icon"></i>
                      <span slot="title">{{menu.name}}</span>
                  </el-menu-item>
                  <el-submenu index="1" v-if="menu.childer">
                      <template slot="title">
                          <i :class="menu.icon"></i>
                          <span slot="title">{{menu.name}}</span>
                      </template>
                      <el-menu-item-group >
                          <template slot="title"></template>
                          <el-menu-item  v-for="me in menu.childer" :index="me.address">
                              <i :class="me.icon"></i>
                              <span slot="title">{{me.name}}</span>
                          </el-menu-item>
                      </el-menu-item-group>
                  </el-submenu>
              </el-menu>
          </el-col>
          <el-col :span="21" >
              <router-view/>
          </el-col>
      </el-row>
      <router-view  v-if="!$route.meta.keep" />
  </div>
</template>
<script>
  export default {
    data(){
      return {
          MenuList:[

              {name:'首页',address:'/home',icon:'el-icon-s-shop'},
              {name:'菜品管理',address:'/food',icon:'el-icon-dish'},
              {name:'员工管理',address:'/staff',icon:'el-icon-user-solid'},
              {name:'餐桌管理',address:'/dt',icon:'el-icon-hot-water'},
              {name:'订单管理',address:'/order',icon:'el-icon-platform-eleme'},
              {name:'财务管理',address:'/finance',icon:'el-icon-s-finance'},
              {name:'餐饮前台',address:'/cashier',icon:'el-icon-phone-outline'},
              {name:'注销',address:'/',icon:'el-icon-switch-button'},
              // {name:'分组',address:'',icon:'el-icon-phone-outline',childer:[{name:'分组一',address:'/asdasd',icon:'el-icon-picture-outline-round'},{name:'分组二',address:'/qweqwe',icon:'el-icon-video-camera'}]},
          ],
      }
    },
      methods:{
          exit(){
              //退出登录，清空token
              localStorage.removeItem('Authorization');
              sessionStorage.removeItem('user');
              this.$router.push('/');
          },
      }
  }
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>
